<template>
	<div ref="ganttContainer"></div>
</template>

<script>
import {gantt} from 'dhtmlx-gantt';
import moment from "moment";

export default {
	props: {
		readOnly:{type:Boolean},
		tasks: {
			type: Object,
			default() {
				return {data: [], links: []}
			}
		}
	},
	watch: {
		"tasks": {
			handler(val) {
				gantt.clearAll();
				gantt.parse(val);
			}
		}
	},
	data(){
		return {
			events:[]
		}
	},
	beforeUnmount() {
		this.events.forEach(ele => {
			gantt.detachEvent(ele)
		})
	},
	mounted () {
		let _that = this;
		let editFlag =this.readOnly==true?true:false;
		gantt.i18n.setLocale('cn');
		gantt.config.date_format = "%Y-%m-%d";
		gantt.config.readonly = this.readOnly;
		//gantt.config.sort = true /*任务排序*/
		gantt.config.columns = [
			{name: "text", label: "项目名称", width: 150, align: "left", tree: true},
			{name: "progress", label: "进度", width: 80, align: "center"},
			{name: "start_date", label: "开始时间", width: 80, align: "center"},
			{name: "duration", label: "工期", width: 50, align: "center"},
			{name: "userName", label: "负责人", width: 100, align: "center"},
			{name: "add", label: "",hide:editFlag}
		]
		gantt.config.subscales = [
			{unit: "month", step: 1, date: "%M"}
		];
		//gantt.config.drag_project = true
		gantt.plugins({marker: true, tooltip: true}); // 开启marker插件
		let dateToStr = gantt.date.date_to_str(gantt.config.task_date);
		let today = new Date();
		gantt.addMarker({
			start_date: today,
			css: 'today',
			text: '今日:' + moment(new Date()).format('YYYY-MM-DD'),
			title: 'Today: ' + dateToStr(today)
		});
		gantt.config.fit_tasks = true;
		gantt.init(this.$refs.ganttContainer);
		gantt.parse(this.$props.tasks);
		const onAfterTaskAdd = gantt.attachEvent("onAfterTaskAdd", async function (id, item) {
			let parentItem = gantt.getTask(item.parent);
			let taskId = "";
			if(parentItem.isTask=='true')
			{
				taskId = item.parent;
			}
			let param = {
				id:id,
				taskId:taskId,
				text:item.text,
				duration:item.duration,
				parent:item.parent,
				progress:item.progress,
				startDate:moment(item.start_date).format('YYYY-MM-DD')
			}
			let res = await _that.$API.office.task.insertTaskGanttData.post(param);
			if (res.code == 200) {
				_that.$message.success(res.message)
			} else {
				_that.$alert(res.message, "提示", {type: 'error'})
			}
		});
		this.events.push(onAfterTaskAdd)
		//移动进度后触发
		const onAfterTaskDrag = gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
			console.log("移动进度后触发");
		});
		this.events.push(onAfterTaskDrag)
		//移动任务后触发
		const onAfterTaskMove = gantt.attachEvent("onAfterTaskMove", async function (id, parent, tindex) {
			console.log("移动任务后触发");
		});
		this.events.push(onAfterTaskMove)
		//删除任务后触发
		const onAfterTaskDelete = gantt.attachEvent("onAfterTaskDelete", async function (id, item) {
			let res = await _that.$API.office.task.deleteTaskGanttData.post({taskDataId: id});
			if (res.code == 200) {
				_that.$message.success(res.message)
			} else {
				_that.$alert(res.message, "提示", {type: 'error'})
			}
		});
		this.events.push(onAfterTaskDelete)
		//修改任务后触发
		const onAfterTaskUpdate = gantt.attachEvent("onAfterTaskUpdate", async function (id, item) {
			let param = {
				taskDataId:id,
				text:item.text,
				duration:item.duration,
				parent:item.parent,
				progress:item.progress,
				startDate:moment(item.start_date).format('YYYY-MM-DD')
			}
			let res = await _that.$API.office.task.updateTaskGanttData.post(param);
			if (res.code == 200) {
				_that.$message.success(res.message)
			} else {
				_that.$alert(res.message, "提示", {type: 'error'})
			}
		})
		this.events.push(onAfterTaskUpdate)
		const onAfterLinkDelete = gantt.attachEvent("onAfterLinkDelete", async function (id, item) {
			let res = await _that.$API.office.task.deleteTaskGanttLink.post({taskLinkId: id,});
			if (res.code == 200) {
				_that.$message.success(res.message)
			} else {
				_that.$alert(res.message, "提示", {type: 'error'})
			}
		});
		this.events.push(onAfterLinkDelete)
		const onAfterLinkAdd = gantt.attachEvent("onAfterLinkAdd", async function (id, item) {
			let params = {
				source: item.source,
				target: item.target,
				type: item.type
			}
			let res = await _that.$API.office.task.insertTaskGanttLink.post(params);
			if (res.code == 200) {
				_that.$message.success(res.message)
			} else {
				_that.$alert(res.message, "提示", {type: 'error'})
			}
		});
		this.events.push(onAfterLinkAdd)
		const onAfterLinkUpdate = gantt.attachEvent("onAfterLinkUpdate", async function (id, item) {
			console.log("updateLink");
		});
		this.events.push(onAfterLinkUpdate)
		//保存验证
		const onLightboxSave = gantt.attachEvent("onLightboxSave", function (id, item) {
			if (!item.text) {
				gantt.message({type: "error", text: "请填写任务名称!"});
				return false;
			}
			return true;
		});
		this.events.push(onLightboxSave)
	}
}
</script>

<style scoped>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
:deep(.gantt_grid_head_add){
	display: none;
}
</style>
